<template>
  <div class="productList">
    <div class="headers">
      <div class="listHead">
        <div class="headLeft" @click='goBack'></div>
        <div class="search">
          <img src="../../assets/image/carProduct/search2.png" />
          <input type="text" placeholder="请输入搜索的商品" v-model='inputVal'/>
        </div>
        <div class="popSearch" @click='searchCarPro(inputVal)'>搜索</div>
      </div>
      <div class="tabs">
      	<div class="tabItem" :class='{active:selectType==1}' @click='select(1)'>
      		<p>全部</p>
      	</div>
      	<div class="tabItem" :class='{active:selectType==2}' @click='select(2)'>
      		<p>最新</p>
      	</div>
      	<div class="tabItem" :class='{active:selectType==3}' @click='select(3)'>
      		<p>价格</p>
      		<div class="types" :class='{types1:priceU,types2:priceD}'></div>
      	</div>
      	<div class="tabItem" :class='{active:selectType==4}' @click='select(4)'>
      		<p>评价</p>
      		<div class="types" :class='{types1:commentU,types2:commentD}'></div>
      	</div>
      </div>
    </div>
    <div class="allProduct">
    	<div class="listItem productBorder" v-for='item in productList' @click='goShopDetail(item.SERV_ID)'>
    		<img :src="productMess.IMG_URL+item.COVER_IMG" alt="" v-if='item.COVER_IMG.indexOf("http")<=-1'/>
    		<img :src="item.COVER_IMG" alt="" v-if='item.COVER_IMG.indexOf("http")>-1'/>
    		<p>{{item.REMARK}}</p>
    		<h2>{{item.SERV_SUBJECT}}</h2>
    		<div class="price">
    		    <span>￥{{item.PRICE}}</span>
            <img src="../../assets/image/home/shopCar.png" alt="" />
    		</div>
    	</div>
    </div>
    <div class="noData" v-if='productList.length==0'>
      <img src="../../assets/image/carProduct/noData.png" alt="" />
      <p>该分类下暂无商品</p>
    </div>
  </div>
</template>
<script>
/*车品列表*/
export default {
  name:"productList",
  // 数据
  data(){

    return{
    	selectType:1,  //排序方式
    	productMess:'', //所有的商品信息
    	productList:'',  //商品列表
    	priceD:false,  //价格排序
    	priceU:false,
    	commentD:false,//评论排序
    	commentU:false,
      searchVal:'',  //搜索的值
      inputVal:'',
      historyArr:[]
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
  	this.productMess=JSON.parse(sessionStorage.getItem('productList'));
    if(localStorage.getItem('searchHis')){
      this.historyArr=JSON.parse(localStorage.getItem('searchHis'));
    }
  	this.productList=this.productMess.RESULT_DATA;
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    goBack(){
    	this.$router.go(-1);
    },
    //排序的切换
    select(num){
    	this.selectType=num;
    	let that=this;
    	if(num==1){
    		//将价钱和评论排序标注重置
    		this.priceU=false;
    		this.priceD=false;
    		this.commentU=false;
    		this.commentD=false;
    		this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA;
    	}else if(num==2){
    		//将价钱和评论排序标注重置
    		this.priceU=false;
    		this.priceD=false;
    		this.commentU=false;
    		this.commentD=false;
    		this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA.sort(that.sortBy('PUB_DATE',false));
    	}else if(num==3){
    		//将评论排序重置
    		this.commentU=false;
    		this.commentD=false;
    		if(this.priceD){//降序
    		  this.priceU=true;
    		  this.priceD=false;
    		  this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA.sort(that.sortBy('PRICE',true));
    		}else if(this.priceU){//升序
    		  this.priceU=false;
    		  this.priceD=true;
    		  this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA.sort(that.sortBy('PRICE',false));
    		}else {
    		  this.priceU=true;
    		  this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA.sort(that.sortBy('PRICE',true));
    		}
    	}else if(num==4){
    		// 将价钱排序重置
    		this.priceU=false;
    		this.priceD=false;
    		if(this.commentD){//降序
    		  this.commentU=true;
    		  this.commentD=false;
    		  this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA.sort(that.sortBy('COMMENTS',true));
    		}else if(this.commentU){//升序
    		  this.commentU=false;
    		  this.commentD=true;
    		  this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA.sort(that.sortBy('COMMENTS',false));
    		}else {
    		  this.commentU=true;
    		  this.productList=JSON.parse(sessionStorage.getItem('productList')).RESULT_DATA.sort(that.sortBy('COMMENTS',true));
    		}
    	}
    },
    sortBy(attr,rev){
        //第二个参数没有传递 默认升序排列
        //@param attr 排序的属性 如number属性
        // @param rev true表示升序排列，false降序排序
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }
        
        return function(a,b){
            a = Number(a[attr]);
            b = Number(b[attr]);
            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    },
    //搜索方法
    searchCarPro(keyWord){
      if(keyWord==''){
        this.$vux.alert.show({
            title: '提示',
            content: '请选择搜索内容'
        })
        return;
      }
      this.$vux.loading.show({
       text: '搜索中...'
      })
      this.$fetchPost('/searchAction/servSearch.action',{KEY_WORDS:keyWord}).then(res=>{
          if(res.STATUS_CODE==1){
            this.$vux.loading.hide();
            this.searchVal=keyWord;
            this.addHistory();//添加历史记录
            this.productList=res.RESULT_DATA;
          }
        },err=>{
          console.log(err);
      })
    },
    //添加历史记录
    addHistory(){
      if(localStorage.getItem('searchHis')){
          let arr=JSON.parse(localStorage.getItem('searchHis'));
          let flag=false;
          for(let i=0;i<arr.length;i++){
            if(arr[i]===this.searchVal){
              flag=true;
              break;
            }
          }
          if(!flag){
            this.historyArr.push(this.searchVal);
            localStorage.setItem('searchHis',JSON.stringify(this.historyArr));
          }
        }else{
          this.historyArr.push(this.searchVal);
          localStorage.setItem('searchHis',JSON.stringify(this.searchVal));
        }
    },
    //去商品详情页
    goShopDetail(id){
    	this.$router.push('/shopDetail/'+id);
    }
  },
  // 子组件
  components:{
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.productList{
  min-height: 100%;
  width: 7.5rem;
  position: relative;
  background: #fff;
  .headers{
    position: fixed;
    top: 0;
    width: 7.5rem;
    z-index: 999;
    border-bottom: 1px solid #EFEFF4;
  }
  .listHead{
      width: 7.5rem;
      height: 0.9rem;
      background: #fff;
      padding: 0.1rem 0;
      display: flex;
      .headLeft{
        margin: 0.19rem 0.2rem 0.19rem 0.3rem;
        width: 0.3rem;
        height: 0.3rem;
        border:1px solid #999;
        border-width: 0px 0 1px 1px;
        transform:rotate(45deg);
      }
      .search{
        display: flex;
        width: 5.7rem;
        justify-content:center;
        align-items:center;
        background: #eaebed;
        border-radius: 0.1rem;
        input{
          border: 0;
          background: #eaebed;
          margin-left: 0.1rem;
          width: 5rem;
          display: block;
          height:0.55rem;
          outline: medium;
          font-size: 0.29rem;
          color: #999;
        }
        img{
          width: 0.32rem;
          height: 0.32rem;
        }
      }
      .popSearch{
        font-size: 0.3rem;
        line-height: 0.7rem;
        padding-left: 0.15rem;
      }
    }
  .tabs{
  	height: 0.8rem;
  	background: #fff;
  	display: flex;
  	justify-content:center;
  	align-items:center;
  	.tabItem{
  		width: 25%;
  		height: 0.75rem;
  		/* margin: 0 0.2rem; */
  		line-height: 0.75rem;
  		display: flex;
	  	justify-content:center;
	  	align-items:center;
  		p{
	  	   font-size: 0.27rem;
         color: #323333;
	  	}
	  	.types{
	  		margin-left: 0.1rem;
	  		width: 0.14rem;
	  		height: 0.18rem;
	  		background: url(../../assets/image/carProduct/type1.png) no-repeat;
	  		background-size: 0.14rem 0.18rem;
	  	}
	  	.types1{
	  		background: url(../../assets/image/carProduct/type2.png) no-repeat;
	  		background-size: 0.14rem 0.18rem;
	  	}
	  	.types2{
	  		background: url(../../assets/image/carProduct/type3.png) no-repeat;
	  		background-size: 0.14rem 0.18rem;
	  	}
  	}
  	.active{
  		p{
  			color: #EC2121;
  		}
  	}
  }
  .allProduct{
        display: flex;
        justify-between:space-around;
        padding-top: 1.9rem;
        flex-wrap:wrap;
        .listItem{
           padding: 0rem 0 0.6rem 0;
           margin: 0 0.1rem 0.1rem 0.175rem;
           box-sizing: border-box;
           background: #fff;
           img{
            width: 3.5rem;
            height: 3rem;
            background: #f7f7f7;
            display: block;
           }
           h2{
            width: 3.5rem;
            margin-top: 0.2rem;
            font-size: 0.26rem;
            line-height: 0.35rem;
            padding: 0 0.15rem;
            color: #222;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
           }
           p{
            font-size: 0.22rem;
            z-index: 2;
            height: 0.5rem;
            line-height: 0.5rem;
            position:relative;
            width: 3.46rem;
            margin: 0 auto;
            background: #f7f7f7;
            text-overflow:ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding: 0 0.1rem;
            color: #EC2121;
           }
           .price{
            width: 3.5rem;
            position: absolute;
            bottom: 0.1rem;
            display: flex;
            justify-content:space-between;
            align-items:flex-center;
            padding: 0.15rem 0.2rem 0.05rem 0.2rem;
             img{
              width: 0.4rem;
              height:0.35rem;
              background: #fff;
             }
             span{
              font-size: 0.28rem;
              color:#e84632;
              padding-right: 0.15rem;
              font-weight: bolder;
             }
           }
        }
        .listItem:nth-child(2n){
          padding: 0rem 0rem 0.1rem 0;
          margin: 0 0.175rem 0.1rem 0;
        }
      }
   
    /*边框一像素*/
    .productBorder{
      position:relative;
    }
    .productBorder::after {
      content: "";
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      -webkit-transform:scale(0.5,0.5);
      transform:scale(0.5,0.5);
      transform-origin:0 0;
      border: 1px solid #e1e2df;
    }
    .noData{
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        img{
          width: 2.1rem;
          height: 1.74rem;
        }
        p{
          font-size: 0.22rem;
          color: #ccc;
        }
    }
 }
</style>